<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="12">
				<el-card>
					<template #header>
						<div class="card-header">
							<span>表格</span>
						</div>
					</template>
					<div class="css-table">
						<!-- 表格数据 -->
						<div class="css-tbody">
							<div class="css-tr">
								<div class="css-td td0">序号</div>
								<div class="css-td td1">姓名</div>
								<div class="css-td td2">年龄</div>
								<div class="css-td td3">职业</div>
							</div>
							<div class="css-tr" v-for="(item, index) in tableData" :key="index">
								<div class="css-td td0">{{ index + 1 }}</div>
								<div class="css-td td1">{{ item.name }}</div>
								<div class="css-td td2">{{ item.age }}</div>
								<div class="css-td td3">
									<el-tooltip effect="dark" :content="item.job" placement="top">
										<span class="tooltip-text">{{ item.job }}</span>
									</el-tooltip>
								</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script lang="ts" setup>
const tableData = ref([
	{
		name: "张三",
		age: 28,
		job: "前端开发"
	},
	{
		name: "张三",
		age: 28,
		job: "前端开发前端开发前端开发前端开发前端开发前端开发前端开发前端开发前端开发"
	},
	{
		name: "张三",
		age: 28,
		job: "前端开发"
	},
	{
		name: "张三",
		age: 28,
		job: "前端开发"
	}
]);
</script>
<style lang="scss" scoped>
/* CSS样式 */
.css-table {
	// border: 1px solid #ddd;
	font-family: sans-serif;
}
.css-tr {
	display: flex; /* 关键属性：启用Flex布局 */
}

.css-td {
	position: relative;
	padding: 12px 16px;
	border-bottom: 1px dashed #ddd;
	flex-shrink: 0;
	text-align: left;
}

.el-tooltip__popper {
	position: fixed !important;
	transform: none !important;
	margin: 5px 0 !important;
}

.css-th {
	background: #f8f9fa;
	font-weight: bold;
}
.css-th:last-child,
.css-td:last-child {
	border-right: none; /* 移除最后一列的右边框 */
}
.css-tr:last-child .css-td {
	// border-bottom: none; /* 移除最后一行的下边框 */
}
.td0 {
	width: 10%;
}
.td1 {
	width: 20%;
}
.td2 {
	width: 30%;
}
.td3 {
	width: 40%;
}
.tooltip-text {
	display: inline-block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
